<template>
  <div class="j-user-actions">
    <a-dropdown trigger="hover">
      <div class="user-action-warp">
        <a-avatar
          :size="35"
          imageUrl="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
        >
        </a-avatar>
        <!-- <span class="username"></span> -->
        <!-- <icon-down /> -->
      </div>
      <template #content>
        <a-doption
          v-for="item in dropList"
          :key="item.name"
          @click="handleClick(item.name)"
        >
          {{ item.title }}
        </a-doption>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { DropItem } from "./index";
import { userStorer } from "@/stores/user";
const userStore = userStorer();
const router = useRouter();

const dropList = reactive<DropItem[]>([
  // { title: "首页", name: "Home" },
  // { title: "饿了么", name: "Elm" },
  // { title: "高德地图", name: "Gd" },
  // { title: "个人中心", name: "User" },
  { title: "退出登录", name: "Logout" },
]);

const handleClick = (url: string) => {
  if (url === "Logout") {
    router.replace({ name: "Login" });
    localStorage.clear();
    return;
  }
  router.push({ name: url });
};
</script>
<style scoped lang="less">
.j-user-actions {
  cursor: pointer;
  .username {
    margin: 0 4px 0 8px;
  }
  svg {
    margin-right: 0 !important;
  }
}
</style>
